<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>final-gateway 管理界面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/res/img/favicon.ico" type="image/x-icon">
    <link href="/res/layui/css/layui.css" rel="stylesheet">
    <link href="/res/css/animate.min.css" rel="stylesheet">
    <link href="/res/css/common.css" rel="stylesheet">
</head>
<body>
<div class="animate__animated animate__fadeIn layui-layout layui-layout-admin">
    <div class="layui-header flex-row" style="padding-left: 200px;align-items: center">
        <div class="layui-logo layui-hide-xs layui-bg-cyan">final-gateway</div>
        <div style="color: white;margin-left: 20px">
            <button id="stats" class="layui-btn layui-btn-primary layui-border-blue">
                <i class="layui-icon layui-icon-refresh"></i>刷新监控数据
            </button>
            <button id="clearCache" class="layui-btn layui-btn-primary layui-border-blue">
                <i class="layui-icon layui-icon-refresh"></i>清理URL缓存
            </button>
            <button id="restart" class="layui-btn layui-btn-primary layui-border-orange">
                <i class="layui-icon layui-icon-refresh-1"></i>重启所有服务
            </button>
            <button id="close" class="layui-btn layui-btn-primary layui-border-red">
                <i class="layui-icon layui-icon-logout"></i>停止服务
            </button>
        </div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <a href="javascript:;" style="color: white">
                    <img src="/res/img/logo.png" style="width: 25px;height: 25px">
                    管理员
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="/api/user/logout">退出登录</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical" style="color: white"></i>
                </a>
            </li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="lay-menu">
                <li class="layui-nav-item layui-this"><a href="javascript:;">控制台</a></li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">网关</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">网关配置</a></dd>
                        <dd><a href="javascript:;">发布历史</a></dd>
                        <dd><a href="javascript:;">证书</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">监控</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">流量监控</a></dd>
                        <dd><a href="javascript:;">请求日志</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="javascript:;">操作日志</a></li>
            </ul>
        </div>
    </div>
    <div class="layui-body" style="padding: 15px 15px 50px 15px">
        <!-- 内容主体区域 -->
        <iframe id="ifr" title="控制台" src="/console" style="border: none;width: 100%;height: 100%"></iframe>
    </div>
    <div class="layui-footer">
        <!-- 底部固定区域 -->
        <a href="https://gitcode.com/lingkang/final-gateway" target="_blank">final-gateway</a>
        @2024 <a target="_blank" href="https://me.lingkang.top">https://me.lingkang.top</a>
    </div>
</div>
<script src="/res/js/request.js"></script>
<script src="/res/layui/layui.js"></script>
<script>
    //JS
    layui.use(['element', 'layer', 'util'], function () {
        var element = layui.element;
        var layer = layui.layer;
        var util = layui.util;
        var $ = layui.$;

        var map = {
            '控制台': '/console',
            '网关配置': '/config',
            '发布历史': '/history',
            '证书': '/ssl/index',
            '操作日志': '/actionLog',
            '流量监控': '/access',
            '请求日志': '/requestLog',
        }

        // 导航点击事件
        element.on('nav(lay-menu)', function (elem) {
            // console.log(elem); // 得到当前点击的元素 jQuery 对象
            // layer.msg(elem.text());
            var ifr = $('#ifr')
            if (ifr.attr('title') === elem.text())
                return;
            ifr.attr('src', map[elem.text()])
            ifr.attr('title', elem.text())
        });

        //头部事件
        util.event('lay-header-event', {
            menuLeft: function (othis) { // 左侧菜单事件
                layer.msg('展开左侧菜单的操作', {icon: 0});
            },
            menuRight: function () {  // 右侧菜单事件
                layer.open({
                    type: 1,
                    title: '更多',
                    content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                    area: ['260px', '100%'],
                    offset: 'rt', // 右上角
                    anim: 'slideLeft', // 从右侧抽屉滑出
                    shadeClose: true,
                    scrollbar: false
                });
            }
        });
        $('#stats').click(function () {
            var loadIndex = layer.msg('刷新中...', {
                icon: 16,
                shade: 0.3
            });
            // 模拟关闭
            setTimeout(function () {
                layer.close(loadIndex)
            }, 2000);
            request.post('/api/stats', {
                success(res) {
                    layer.msg(res.msg)
                }
            })
        })
        $('#close').click(function () {
            layer.prompt({
                title: '请谨慎操作', formType: 1,
                success: function (layero, index, that) {
                    var textarea = $(layero).find('input');
                    textarea.attr('placeholder', '请输入登录密码')
                    textarea.css('margin-top', '10px')
                    textarea.before(`<b style="color: red">确认关闭服务？</b>`)
                }
            }, function (pass, index) {
                if (!pass || pass.length < 1) {
                    layer.msg('登录密码不能为空')
                    return
                }
                var index_ = layer.msg('请等待', {icon: 16, shade: 0.6, time: 10000});
                request.post('/close', {
                    data: {password: pass},
                    success(res) {
                        layer.close(index);
                        layer.msg(res.msg, {icon: 1});
                    },
                    finally() {
                        layer.close(index_);
                    }
                })
            });
        })
        $('#clearCache').click(function () {
            layer.prompt({
                title: '请输入要清理的端口号', formType: 0,
                success: function (layero, index, that) {
                    var input = $(layero).find('input');
                    input.attr('type', 'number')
                    input.attr('placeholder', '请输入要清理的端口号')
                    input.css('margin-top', '10px')
                    input.before(`<b style="color: red">为空时清理所有URL缓存</b>`)
                }
            }, function (pass, index) {
                var index_ = layer.msg('请等待', {icon: 16, shade: 0.6, time: 10000});
                request.post('/api/clearCache', {
                    data: {port: pass},
                    success(res) {
                        layer.close(index);
                        layer.msg(res.msg, {icon: 1});
                    },
                    finally() {
                        layer.close(index_);
                    }
                })
            });
        })

        $('#restart').click(function () {
            layer.prompt({
                title: '请谨慎操作', formType: 1,
                success: function (layero, index, that) {
                    var textarea = $(layero).find('input');
                    textarea.attr('placeholder', '请输入登录密码')
                    textarea.css('margin-top', '10px')
                    textarea.before(`<b style="color: red">确认重启所有服务？</b>`)
                }
            }, function (pass, index) {
                if (!pass || pass.length < 1) {
                    layer.msg('登录密码不能为空')
                    return
                }
                var index_ = layer.msg('请等待', {icon: 16, shade: 0.6, time: 10000});
                request.post('/api/restartAll', {
                    data: {password: pass},
                    success(res) {
                        layer.close(index);
                        layer.msg(res.msg, {icon: 1});
                    },
                    finally() {
                        layer.close(index_);
                    }
                })
            });
        })
    });
</script>
</body>
</html>